import { createRouter, createWebHashHistory } from 'vue-router'
import { useStore } from '../pinia/piniaIndex'
import piniaChildren from '../components/piniaChildren.vue'

// 1. 定义路由组件.
// 也可以从其他文件导入
// const Main = { render(){ return '月影WEB 欢迎大家来学习各种技术知识！'} }
// const Lists = { render(){ return '月影WEB-列表页面'} }


// 2. 定义一些路由
// 每个路由都需要映射到一个组件。
// 我们后面再讨论嵌套路由。
/**
 * 
 */
const routes = [
  { path: '/TS', component: () => import('../components/TS.vue') },
  { path: '/refOrReactive', component: () => import('../components/refOrReactive.vue') },
  {
    path: '/piniaTest',
    name:'piniaTest',
    children: [//子路由
      {
        path: '',//默认项path需写为空,才会默认加载
        name: 'index',
        component: piniaChildren,
        meta: {
          title: '做动态vue路由'
        }
      },      
      {
        path: '/piniaChildren',//url上访问只要子组件path名就行
        name: 'piniaChildren',
        component: piniaChildren,
        meta: {
          title: '做动态vue路由'
        }
      }
    ],
    component: () => import('../components/piniaTest.vue')
  },
  { path: '/mockTest', component: () => import('../components/mockTest.vue') },
  { path: '/computedOrwatch', component: () => import('../components/computedOrwatch.vue') },
  { path: '/father', component: () => import('../components/father.vue') },
  { path: '/toDoListDemo', component: () => import('../components/toDoListDemo/toDoList.vue') },
  { path: '/slot', component: () => import('../components/slot/slot.vue') },
  { path: '/toVue2', component: () => import('../components/vue2/vue2.vue') },
  { path: '/chatRoom11', component: () => import('../components/chatRoom11.vue') },
  { path: '/webSocket', component: () => import('../components/webSocket/webSocket.vue') },
  { path: '/memoryLeak', component: () => import('../components/memoryLeak/_closure.vue') },      
  { path: '/draggable', component: () => import('../components/draggable.vue') },      
  { path: '/filter', component: () => import('../components/filter.vue') },      
]
//如何配置参数

// 3. 创建路由实例并传递 `routes` 配置
// 你可以在这里输入更多的配置，但我们在这里
// 暂时保持简单
const router = createRouter({
  // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
  history: createWebHashHistory(),
  routes,
})

/**
 * 目标：实现不同角色登录，拥有不同权限
 * 
 * 实现方案：通过前置路由守卫拦截路由处理，在登录页判断是否有token，如果没有token继续去登陆，
 * 登录成功后拿取token使用pinia存储状态，再判断是否有路由hasRoute(pinia里的值)没有就请求
 * 接口获取的数据，添加路由并存储菜单数据和权限数据到pinia状态中共享数据（pinia要持久化存储）
 * 
 * 未完成：pinia如何个别值持久化存储，菜单数据和权限数据不明白，目前是控制了菜单，
 * 
 * https://blog.csdn.net/demoren/article/details/126807424
 */
//to: 即将要进入的目标 、 from: 当前导航正要离开的路由、可选的第三个参数 next:进入下一个目标
router.beforeEach((to, from, next) => {
  //pinia数据获取
  let userStore = useStore()
  //可以获取当前页面路径，可做前置判断逻辑，如登录页，token等 
  console.log(to.path)
  // //添加一条新的路由记录到路由。如果路由有一个 name，并且已经有一个与之名字相同的路由，它会先删除之前的路由。
  // router.addRoute({ name: 'piniaTest33', path: '/piniaTest33', component: () => import('../components/piniaTest.vue') })

  // //添加子路由
  // router.addRoute('piniaTest',{ name: 'piniaTest44', path: '/piniaTest44', component: () => import('../components/piniaTest.vue') })
  
  //通过路由的name属性判断是否添加成功
  console.log(router.hasRoute("piniaTest33"))
  next()
})

export default router